<template>
  <div class="container">

    <ChatSession />
    <div class="chat" v-if="sessionStore.sessionIndex === -1"></div>
    <ChatInput v-else />
  </div>
</template>

<script setup>
import {onBeforeMount} from "vue";
import ChatInput from "@/views/chat-input.vue";
import ChatSession from "@/views/chat-session.vue";
import useUserStore from "@/store/User.js";
import useSessionStore from "@/store/Session.js";

const userStore = useUserStore()
const sessionStore = useSessionStore()

onBeforeMount(async () => {
  await Promise.all([userStore.init(), sessionStore.init()])
})
</script>

<style>
.container {
  height: calc(100% - 2px);
  width: 100%;
  max-height: 800px;
  max-width: 1200px;
  display: flex;
  border: 1px solid #dee0e3;
  border-radius: 10px;
}
.chat {
  padding: 0 10px;
}
</style>
